<template>
  <div class="container mt-5">
    <h1 class="text-center mb-4">删除电影</h1>
    <form @submit.prevent="deleteMovie" class="mb-4">
      <div class="mb-3">
        <label for="movieCode" class="form-label">电影代码：</label>
        <input
          type="text"
          id="movieCode"
          v-model="movieCode"
          class="form-control"
          placeholder="请输入电影代码"
          required
        />
      </div>
      <button type="submit" class="btn btn-danger">删除</button>
    </form>

    <div v-if="message" class="alert" :class="isSuccess ? 'alert-success' : 'alert-danger'">
      <i v-if="isSuccess" class="fas fa-check-circle me-2"></i>
      <i v-else class="fas fa-times-circle me-2"></i>
      {{ message }}
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'DeleteMovie',
  setup() {
    const movieCode = ref('');
    const message = ref('');
    const isSuccess = ref(false);

    const deleteMovie = async () => {
      if (!movieCode.value) {
        message.value = '请输入电影代码。';
        isSuccess.value = false;
        return;
      }

      try {
        const response = await fetch(`http://127.0.0.1:8000/api/del_movie?n=${movieCode.value}`);
        const data = await response.json();

        if (data.success) {
          message.value = '操作成功：电影已删除。';
          isSuccess.value = true;
          movieCode.value = '';
        } else {
          message.value = data.message;
          isSuccess.value = false;
        }
      } catch (error) {
        message.value = `请求失败：${error.message}`;
        isSuccess.value = false;
      }

      setTimeout(() => {
        message.value = '';
      }, 3000);
    };

    return {
      movieCode,
      message,
      isSuccess,
      deleteMovie,
    };
  },
};
</script>

<style scoped>
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-control {
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 10px 15px;
  transition: all 0.3s ease;
}

.form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.btn-danger {
  background-color: #dc3545;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.btn-danger:hover {
  background-color: #c82333;
  transform: scale(1.05);
}

.alert {
  border-radius: 8px;
  padding: 10px 15px;
  margin-top: 20px;
  animation: slideIn 0.5s ease-in-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.alert-success {
  background-color: #d4edda;
  color: #155724;
}

.alert-danger {
  background-color: #f8d7da;
  color: #721c24;
}
</style>